<template>
    <div>
        <el-card shadow="never" style="margin-top: 5px;">
            <div class="exam-status subject">
                <span>学科名：</span>
                <!-- <el-radio-group v-model="queryForm.subjectId" size="small" @change="changeStatus">
                    <el-radio-button label="-1" class="btn">全部</el-radio-button>
                    <el-radio-button :label="item.value" class="btn" v-for="item in subjects" :key="item.value">{{ item.name}}</el-radio-button>
                </el-radio-group> -->
                <el-select v-model="queryForm.subjectId" style="width: 20%;" filterable remote reserve-keyword clearable placeholder="请选择学科">
                            <el-option style="text-align: center; " v-for="item in subjects" :key="item.value" :label="item.name" :value="item.value"></el-option>
                </el-select>  
                <el-button type="primary" class="el-btn" icon="el-icon-search" @click="search"></el-button>
            </div>
        </el-card>
        <el-card class="box-card" shadow="never" v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)">
            <el-card class="card-option" shadow="hover" v-for="item in practiceData" :key="item.id">
                <h4 style="padding-bottom: 8px;">{{item.subjectName }}</h4>
                <el-divider></el-divider>
                <p class="exam-option">已做题数：{{item.finishedCount == null ? 0 :item.finishedCount}}/{{ item.questionCount}}</p>
                <p class="exam-option">上次刷题时间：{{ item.createTime == null ? '暂未开始' : item.createTime}}</p>
                <p style="padding-top: 30px; margin-left: 150px;">
                    <router-link v-if="item.questionCount > 0" :to="`/question/practice?id=${item.id}&lastQuestion=${getLastQuestion(item.finishedCount)}`">前往训练</router-link>
                    <span v-else>暂无题目</span>
                </p>
            </el-card>
            <el-card shadow="never" v-if="practiceData.length <= 0" class="no-option">
                    无数据
            </el-card>
        </el-card>
        <el-card class="page-card"  shadow="never" >
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="queryForm.pageIndex"
                    layout="prev, pager, next"
                    :total="total">
                </el-pagination>
            </el-card>
    </div>
</template>

<script>
import {getSubjects} from '@/api/subject/subject'
import {getPracticeList} from '@/api/practice/practice'
export default {
    name:'Question',
    data(){
        return{
            subjects:[],
            queryForm:{
                subjectId:null,
                pageIndex:1,
                pageSize:12
            },
            practiceData:[
                {
                    // 科目ID
                    id:1,
                    subjectName:'高等数学',
                    // 上次做题时间
                    createTime:null,
                    questionCount:200,
                    finishedCount:null
                }
            ],
            total:0,
            loading:false
        }
    },
    mounted(){
        this.getSubjects();
        // 初始化首页
        this.search();
    },
    methods:{
        changeStatus(){
            this.search();
        },
        async search(){
            this.loading = true;
            let res = await getPracticeList(this.queryForm);
            this.practiceData = res.data.records;
            this.loading = false;
        },
        handleCurrentChange(val){
            this.queryForm.pageIndex = val;
            this.search();
        },
        async getSubjects(){
            let res = await getSubjects();
            this.subjects = res.data;
        },
        getLastQuestion(val){
            if(val == null){
                return 0;
            }
            return val;
        }
    }
}
</script>

<style scoped>
    *{
        margin: 0px;
        padding: 0px;
    }
    a{
        text-decoration: none;
        font-size: 14px;
        color: #409Eff;
    }
    .card-option{
        height: 204px; 
        width: 330px; 
        float: left;
        margin: 10px 10px 5px 10px;
    }
    .exam-status{
        margin: 0px auto -15px;
        padding-top: 5px;
        padding-bottom: 15px;
        font-size: 13px; 
        font-family:'宋体';  
        font-weight: bold;
    }
    
    .exam-option{
        text-align: left;
        padding: 15px 0px 5px 10px;
        font-family: '宋体';
        border: none;

    }
    .box-card{
        margin-top: -5px;
        margin-bottom: 15px;
        min-height: 400px;
    }
    .no-option{
        min-height: 300px;
        text-align: center;
        line-height: 300px;
        color: gray;
        margin-top: -15px;
    }
    .page-card{
        margin-top: -15px;
        border: none;
    }
    .el-btn{
        width: 80px;
        height: 38px;
        border: none;
        margin-left: 15px;
    }
</style>